<!--
 * @Author       : Li Ming Yang
 * @Date         : 2023-11-21 16:45:27
 * @Description  : 面板导航组件项
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2023-12-26 21:07:47
-->
<template>
  <image class="panel-navigation-item" :src="data.image" mode="widthFix" :style="[itemStyle]" @click="handleClick" />
</template>

<script>
import mixin from "@/decoration/mixins"
import { useStyle, useDecoUnit } from "@/decoration/utils/style"
export default {
  name: "panel-navigation-item",
  mixins: [mixin],
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    form: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  computed: {
    itemStyle() {
      const style = {}
      style["border-radius"] = useDecoUnit(this.form?.radius)
      return useStyle(style)
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleClick() {
      this.useRouteJupm(this.data)
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-navigation-item {
  flex: 1;
  width: 100%;
  display: flex;
  overflow: hidden;
}
</style>
